import { graphic } from 'echarts'

export const barChart = (data?: any) => {
	if (!data) {
		data = [
			['玄武区', 43.3, 85.8, 93.7],
			['秦淮区', 83.1, 73.4, 55.1],
			['建邺区', 86.4, 65.2, 82.5],
			['鼓楼区', 72.4, 53.9, 39.1],
			['浦口区', 72.4, 53.9, 39.1],
			['栖霞区', 72.4, 53.9, 39.1],
			['雨花台区', 72.4, 53.9, 39.1],
			['江宁区', 72.4, 53.9, 39.1],
			['六合区', 72.4, 53.9, 39.1],
			['溧水区', 72.4, 53.9, 39.1],
			['高淳区', 72.4, 53.9, 39.1],
		]
	}
	let colors = ['#0052D9', '#00A870', '#ED7B2F']
	const itemStyle = {
		barBorderRadius: [4, 4, 0, 0],
		emphasis: {
			shadowBlur: 10,
			shadowOffsetX: 0,
			shadowColor: 'rgba(0, 0, 0, 0.3)',
		},
	}
	const option = {
		color: colors,
		dataset: {
			source: [['product', '服务对象', '从业人员', '服务组织'], ...data],
		},
		xAxis: {
			type: 'category',
			axisLabel: {
				interval: 0,
				rotate: 40,
			},
		},
		series: [
			{
				type: 'bar',
				itemStyle,
			},
			{
				type: 'bar',
				itemStyle,
			},
			{
				type: 'bar',
				itemStyle,
			},
		],
	}
	return option
}

export const lineChart = (data?: any) => {
	let colors = ['#0052D9', '#00A870', '#ED7B2F']
	const option = {
		color: colors,
		tooltip: {
			trigger: 'axis',
		},
		legend: {
			show: false,
		},
		grid: {
			top: 'middle',
			left: '3%',
			right: '4%',
			bottom: '3%',
			height: '80%',
			containLabel: true,
		},
		xAxis: {
			type: 'category',
			axisLine: {
				lineStyle: {
					color: 'rgba(193, 207, 220, 1)',
				},
			},
			axisLabel: {
				textStyle: {
					color: 'rgba(0, 0, 0, 1)',
				},
				interval: 0,
				rotate: 40,
			},
		},
		yAxis: [
			{
				type: 'value',
				axisLabel: {
					textStyle: {
						color: 'rgba(0, 0, 0, 1)',
					},
				},
				axisLine: {
					show: false,
					lineStyle: {
						color: '#cdd5e2',
					},
				},
				splitLine: {
					show: true,
					lineStyle: {
						color: 'rgba(193, 207, 220, 1)',
					},
				},
			},
		],
		dataset: {
			source: [['月份', '服务工单数量'], ...(data || [])],
		},
		series: [
			{
				type: 'line',
				symbolSize: 9, //标记的大小
			},
		],
	}
	return option
}

export const lineAreaChart = (data?: any) => {
	let colors = ['#0052D9', '#00A870', '#ED7B2F']
	const itemStyle = {
		emphasis: {
			shadowBlur: 10,
			shadowOffsetX: 0,
			shadowColor: 'rgba(0, 0, 0, 0.3)',
		},
	}
	const option = {
		color: colors,
		legend: {
			show: false,
		},
		dataset: {
			source: [['月份', '回访量'], ...(data || [])],
		},
		series: [
			{
				type: 'line',
				smooth: 0.4,
				symbol: 'circle',
				symbolSize: 10,
				areaStyle: {
					color: new graphic.LinearGradient(
						0,
						0,
						0,
						1,
						[
							{
								offset: 0,
								color: `#0052d9b3`,
							},
							{
								offset: 1,
								color: '#0052d900',
							},
						],
						false
					),
				},
				lineStyle: {
					width: 2,
					shadowColor: `rgba(253, 148, 67, .2)`,
					shadowBlur: 4,
					shadowOffsetY: 25,
				},
				itemStyle,
			},
		],
	}
	return option
}

export const PieChart = (value?: any) => {
	if (!value) value = 0
	const option = {
		graphic: {
			type: 'text',
			top: '45%',
			left: '40%',
			style: {
				text: `${value?.toFixed(2) || 0}%`,
				font: '48px "microsoft yahei"',
				textAlign: 'center',
				fill: '#0052D9',
			},
		},
		series: [
			{
				type: 'pie',
				center: ['50%', '50%'],
				radius: ['60%', '70%'],
				startAngle: 90, //起始角度
				label: {
					show: false,
				},
				labelLine: {
					show: false,
				},
				hoverAnimation: false,
				emphasis: false,
				data: [
					{
						value: 65,
						name: '',
						itemStyle: {
							color: '#D5D5D5',
						},
					},
					{
						name: '',
						itemStyle: {
							color: '#6982FF',
						},
						value: 100,
					},
				],
			},
		],
	}

	return option
}
